import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { ShopService } from "./shop.service";
import { LocalStorageService } from "../../lib/service/local-storage.service";
import {NavigationEnd, Router} from "@angular/router";
import { ActivatedRoute } from "@angular/router";
import { NzMessageService, NzModalService } from 'ng-zorro-antd';
import {MyShopService} from '../myshop.service';


@Component({
  selector: 'app-display',
  templateUrl: './shop.component.html',
  styleUrls: ['./shop.component.scss'],
})
export class ShopComponent implements OnInit {
  template_id = null;
  isCollapsed = false;
  addshow = false;
  sliderWidth = 180;
  list = this.displayService.list;
  showCaseId = null;
  showCaseIndex = null;
  id;
  boothNumber;
  num = false;
  shop_list = [];

  imageIcon = ['banner_icon', 'group_icon', 'goods_icon'];

  constructor(
    public displayService: ShopService,
    private localStorageService: LocalStorageService,
    private router: Router,
    private routerInfo: ActivatedRoute,
    private confirmServ: NzModalService,
    private _message: NzMessageService,
    private  mshopService: MyShopService
  ) {
  }

  addInput(e, i) {
    e.stopPropagation();
    this.displayService.list[i]['addShow'] = true;
    this.displayService.list[i]['typeOpen'] = true;
    this.displayService.name = this.displayService.list[i]['name'];
    this.displayService.id = -999;
    this.router.navigate(['member/display/add', this.displayService.list[i]['id'], this.displayService.list[i]['booth_number']]);
  }

  toggleCollapsed(value) {
    this.isCollapsed = value;
    if (!this.isCollapsed) {
      // this.typeOpen = true;
    }
  }
  stop(e) {
    e.stopPropagation();
  }

  prevent(e) {
    e.preventDefault();
  }

  // addType(i) {
  //   if (this.displayService.list[i].typeValue) {
  // this.addTypeValue();
  // } else {
  // this.list[i]['addShow'] = false;
  // }
  // }

  detailEdit(e, item, boothnumber) {
    e.stopPropagation();
    this.displayService.id = item.id;
    this.displayService.boothNumber = boothnumber;
    localStorage.setItem('banner_item', item);
    this.router.navigate([`member/display/edit`]);
  }


  checkInfo(caseid, caseindex) {
    this.displayService.showCaseId = caseid;
    this.displayService.showCaseIndex = caseindex;
  }

  detailDel(e, item) {
    e.stopPropagation();
    this.confirmServ.confirm({
      title: '温馨提示',
      content: '<b>您确定要删除这个橱窗吗</b>',
      onOk: () => {

        let matchArr = location.pathname.replace(/\//g, '.').split('.');
        let showCaseId = matchArr[matchArr.length - 3];
        let id = matchArr[matchArr.length - 2];
        let booth = location.pathname[location.pathname.length - 1];
        let flag = true;

        this.displayService.delShowCaseDetail(item.id).subscribe(res => {
          if (res.code === 2000) {
            this._message.create('success', '删除成功');
            this.displayService.list.forEach((e, i) => {
              e['detailList'].forEach((e1, i1) => {
                if (e1['id'] == item.id && id != item.id) {
                  flag = false;
                  this.displayService.getCaseDetailList(e1['showcase_id'], i + '').then(() => {
                    this.displayService.id = id;
                  })
                }
              });
              if (flag) {
                if (e['booth_number'] == booth) {
                  this.displayService.getCaseDetailList(showCaseId, i + '').then((id) => {
                    if (id) {
                      this.displayService.id = id;
                      this.router.navigate([`member/display/${showCaseId}/${id}/${booth}`]);
                    } else {
                      this.router.navigate([`member/display/add/${showCaseId}/${booth}`]);
                    }
                  })
                }
              }
            })
          } else {
            this._message.create('error', res.message);
          }
        })
      },
      onCancel() {
      }
    });
  }

  ngOnInit() {
    // @ts-ignore
    // this.mshopService.getMyShop().subscribe(res => {
    //   console.log('shop', res);
    // });
    // this.template_id = this.localStorageService.getNowApplet()['template_id'];
    //     // if(location.pathname === '/member/display') {
    //     //   this.getShowCaseList().then(() => {
    //     //     this.displayService.showCaseId = this.displayService.list[0]['id'];
    //     //     this.displayService.boothNumber = this.displayService.list[0]['booth_number'];
    //     //     this.displayService.showCaseIndex = 0;
    //     //     this.displayService.name = this.displayService.list[0]['name'];
    //     //     this.router.navigate(['member/display/add/' + this.displayService.showCaseId  + '/' + this.displayService.boothNumber]);
    //     //   });
    //     // }
    //     // this.router.events.subscribe((event) => {
    //     //   if(event instanceof NavigationEnd) {
    //     //     if(event.url == '/member/display') {
    //     //         this.router.navigate(['member/display/add/' + this.displayService.showCaseId  + '/' + this.displayService.boothNumber]);
    //     //     }
    //     //   }
    //     // });
  }

  getShowCaseList() {
    return new Promise((resolve,reject) => {
      this.displayService.getShowCaseList(this.template_id).subscribe(res => {
        if (res.code === 2000) {
          this.displayService.list = res.data.data;
          let len = this.displayService.list.length;
          this.displayService.list.map((e, i) => {
            e['typeOpen'] = false;
            e['addShow'] = false;
            e['typeValue'] = '';
            this.displayService.getShowCaseDetailList(e['id']).subscribe(res1 => {
              if (res.code === 2000) {
                len--;
                let detailList = this.displayService.list[i]['detailList'] = res1.data.data;
                detailList.map((e, i) => {
                  e['edit'] = false;
                });
                resolve();
              };
            });
          });

        }
      })

    })
  }


  showCaseDetail(e, name, showcaseId, id, boothNumber) {
    e.stopPropagation();
    this.displayService.id = id;
    this.displayService.name = name;
    this.router.navigate(['member/display/' + showcaseId + '/' + id + '/' + boothNumber]);
  }

}
